<template>
  <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="visible" top="0" class="prod-det"
    width="1100px" title="商品详情" @close="closeDialog">
    <div class="mod-prod-info release-goods">
      <!-- <div class="title">商品信息</div> -->
      <el-form ref="dataForm" class="part-form" :model="dataForm" label-width="110px">
        <div class="info-box">

          <!-- 1.商品基本信息 -->
          <div class="part-content">
            <!-- 入驻类型 -->
            <!-- 商家名称 -->
            <el-form-item label="商家名称:" prop="name">
              <span>{{ dataForm.storeName }}</span>
            </el-form-item>
            <el-form-item label="入驻类型:" prop="name">
              <span>{{ dataForm.settleType }}</span>
            </el-form-item>
            <!-- 经营范围 -->
            <el-form-item label="经营范围:" prop="name">
              <span>{{ dataForm.manager }}</span>
            </el-form-item>
            <!-- 联系人 -->
            <el-form-item label="联系人:" prop="name">
              <span>{{ dataForm.contact }}</span>
            </el-form-item>
            <!-- 联系方式 -->
            <el-form-item label="联系方式:" prop="name">
              <span>{{ dataForm.phone }}</span>
            </el-form-item>
            <!-- 提交时间 -->
            <el-form-item label="提交时间:" prop="name">
              <span>{{ dataForm.createTime }}</span>
            </el-form-item>
            <!-- 门店照片 -->
            <div class="part-form-div">
              <el-form-item label="门店照片:" prop="name">
              <div v-if="dataForm.storePhoto" class="part-form-item">
                <img
                  :src="(dataForm.storePhoto).indexOf('http')===-1 ? resourcesUrl + dataForm.storePhoto : dataForm.storePhoto"
                  class="main-img" @click="picturePreview(dataForm.storePhoto)">
                <!-- <img-upload v-model="dataForm.mainImgUrl" /> -->
            </div>
            </el-form-item>
          </div>
          <!-- 营业执照 -->
            <div class="part-form-div">
              <el-form-item label="营业执照:" prop="name">
              <div v-if="dataForm.licensePhoto" class="part-form-item">
                <img
                  :src="(dataForm.licensePhoto).indexOf('http')===-1 ? resourcesUrl + dataForm.licensePhoto : dataForm.licensePhoto"
                  class="main-img" @click="picturePreview(dataForm.licensePhoto)">
            </div>
            </el-form-item>
          </div>
          </div>
        </div>

        <!-- 图片预览 -->
        <picture-preview v-if="picturePreviewVisible" ref="picturePreview" />

      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import * as api from '@/api/system/settle'
  import productDetails from '@/components/ProductDetails'
  import picturePreview from '@/components/PicturePreview'

  export default {
    components: {
      productDetails,
      picturePreview
    },
    data() {
      return {
        visible: false,
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataForm: {
          settleId: this.$route.query.settleId || null, // 详情id
        },
        picturePreviewVisible: false, // 预览图片弹窗
      }
    },

    created() {
      this.init()
    },

    methods: {
      init(settleId) {
        console.log('settleId:', settleId)
        this.visible = true
        this.dataForm.settleId = settleId || ''
        console.log('settleId:', this.dataForm.settleId)
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (!settleId) {
            return
          }
          api.settle(settleId).then(data => {
            console.log('获取data:', data)
            this.dataForm = data
            console.log('55555555555' + this.dataForm);
            console.log('------------')
          })
        })
      },
      // 关闭dialog
      closeDialog() {
        this.dataForm = {
          settleId: null, // 商品id
        }
      },
      // 图片预览
      picturePreview(imgUrl) {
        this.picturePreviewVisible = true
        this.$nextTick(() => {
          this.$refs.picturePreview.init(imgUrl)
        })
      }
    }
  }
</script>

<style lang="scss" scope>
  .main-img{
    width: 150px;
    height: auto;
  }
  .prod-det.el-dialog__wrapper {
    display: flex;
    align-items: center;
  }

  .prod-det {
    .el-dialog__body {
      padding: 10px 20px;
    }

    .part-form {
      max-height: 780px;
      overflow: auto;
    }

    .part-form::-webkit-scrollbar {
      display: none;
    }
  }

  .mod-prod-info.release-goods {
    color: #606266;

    .el-radio__input.is-checked .el-radio__inner,
    .el-checkbox__input.is-checked .el-checkbox__inner {
      border-color: #02a1e9;
      background: #02a1e9;
    }

    .el-radio__input.is-checked+.el-radio__label,
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #02a1e9;
    }

    .el-checkbox__input.is-disabled+span.el-checkbox__label {
      color: #aaabac;
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
      background-color: #f2f6fc;
      border-color: #dcdfe6;
    }

    .star::before {
      // *样式
      content: "*";
      color: #ff4949;
      margin-right: 4px;
    }

    // 三角形样式
    .stars-icon {
      display: inline-block;
      width: 12px;
      height: 8px;
    }

    .stars-icon::before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid#ff7300;
    }

    .title {
      max-width: 1200px;
      padding: 0 20px;
      font-weight: bold;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
    }

    .info-box {
      max-width: 1200px;
      margin: 0 auto;
      border: 1px solid #eee;
      margin-bottom: 20px;
        .prohibit {
          // 禁止点击
          cursor: not-allowed;
        }
        padding: 20px;
        .part-tit {
          .part-form-div {
            display: flex;
            align-items: top;
            font-size: 14px;
            margin-bottom: 22px;
            .part-form-item {
              width: 100%;
              // 轮播图&主图
              .imgs {
                display: inline-block;
              }
              .imgs:not(:first-child) {
                margin-left: 8px;
              }

              img.main-img {
                display: block;
                width: 120px;
                height: 120px;
                padding: 5px;
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
              }
              img.main-img:hover {
                cursor: pointer;
              }
          }
        }
      }
    }
  }
</style>
